<template>
  <el-row v-loading="loading">
    <el-col :span="24">
      <el-row class="search-row">
        <el-col :span="12">
          <el-input placeholder="请输入项目名称" size="small" v-model="like1" style="width: 260px;">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <div style="height: 30px;">
          </div>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="addTaoCan">新增</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="findOrder().slice((pageNum-1)*pageSize,pageNum*pageSize)" border size="mini" header-cell-class-name="header-row">
            <el-table-column prop="id" label="项目编号" header-align="center" align="center"></el-table-column>
            <el-table-column prop="name" label="项目名称" header-align="center" align="center" width="150"></el-table-column>
            <el-table-column prop="mnemonicName" label="助记名" header-align="center" align="center"></el-table-column>
            <el-table-column prop="type" label="项目类型" header-align="center" align="center" width="140"></el-table-column>
            <el-table-column prop="sex" label="适用性别" header-align="center" align="center"></el-table-column>
            <el-table-column prop="age" label="适用年龄" header-align="center" align="center"></el-table-column>
            <el-table-column prop="price" label="项目价格" header-align="center" align="center"></el-table-column>
            <el-table-column prop="costJiage" label="项目成本" header-align="center" align="center"></el-table-column>
            <el-table-column label="项目状态" header-align="center" align="center" width="200">
              <template slot-scope="scope">
                <el-switch
                :value="scope.row.itemStatus"
                active-value="启用"
                inactive-value="禁用"
                active-text="启用"
                inactive-text="禁用"
                @change="Kgtaocan(scope.row)">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" header-align="center" align="center" width="100">
              <template slot-scope="scope">
                <el-button type="primary" size="mini"
                  @click="xgtaocan(scope.row)">修改</el-button>
              </template>
            </el-table-column>
        </el-table>
        </el-col>
        <el-col :span="24">
          <el-pagination
            background
            @size-change="handleSizeChange"
            :current-page.sync="pageNum"
            :page-sizes="[2,4,6,8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="findOrder().length">
          </el-pagination>
          <el-dialog :title="title" :visible.sync="dialogTransferVisible">
            <el-form :model="checkitems" :rules="rules" ref="checkitems" label-position="right" size="small">
                  <el-form-item>
                    <el-col :span="11">
                      <el-form-item label="项目名称" prop="name">
                        <el-input placeholder="项目名称" size="small" v-model="checkitems.name" style="width: 235px;"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                      <el-form-item prop="mnemonicName" label="助记名">
                        <el-input placeholder="助记名" size="small" v-model="checkitems.mnemonicName" style="width: 255px;"/>
                      </el-form-item>
                    </el-col>
                  </el-form-item>

                  <el-form-item>
                    <el-col :span="11">
                      <el-form-item prop="sex" label="适应性别">
                        <el-radio-group v-model="checkitems.sex" size="small">
                          <el-radio-button label="通用" value="0"></el-radio-button>
                          <el-radio-button label="男" value="1"></el-radio-button>
                          <el-radio-button label="女" value="2"></el-radio-button>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="5"></el-col>
                    <el-col :span="11">
                      <el-form-item prop="type" label="项目类型">
                        <el-radio-group v-model="checkitems.type" size="small">
                          <el-radio-button label="内、外科检查" value="内、外科检查"></el-radio-button>
                          <el-radio-button label="化验检查" value="化验检查"></el-radio-button>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-form-item>

                  <el-form-item>
                    <el-col :span="11">
                      <el-form-item prop="age" label="适用年龄">
                        <el-input placeholder="适用年龄" size="small" v-model="checkitems.age" style="width: 235px;"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                      <el-form-item prop="affiliationClassify" label="所属分类">
                        <el-input placeholder="所属分类" size="small" v-model="checkitems.affiliationClassify" style="width: 235px;"/>
                      </el-form-item>
                    </el-col>
                  </el-form-item>

                  <el-form-item>
                    <el-col :span="11">
                      <el-form-item prop="price" label="项目价格">
                        <el-input placeholder="项目价格" size="small" v-model="checkitems.price" style="width: 235px;"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                      <el-form-item prop="costJiage" label="项目成本">
                        <el-input placeholder="项目成本" size="small" v-model="checkitems.costJiage" style="width: 235px;"/>
                      </el-form-item>
                    </el-col>
                  </el-form-item>

                  <el-form-item>
                    <el-col :span="11">
                      <el-form-item prop="updatetime" label="修改时间">
                        <el-input size="small" v-model="checkitems.updatetime" style="width: 232px;" :disabled="true"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                      <el-form-item prop="createtime" label="创建时间">
                        <el-input size="small" v-model="checkitems.createtime" style="width: 232px;" :disabled="true"/>
                      </el-form-item>
                    </el-col>
                  </el-form-item>

                  <el-form-item label="项目说明" prop="remark">
                    <el-input
                    style="width: 630px;"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入项目说明"
                    v-model="checkitems.remark">
                  </el-input>
                  </el-form-item>

                  <el-form-item label="注意事项" prop="attention">
                    <el-input
                      style="width: 630px;"
                      type="textarea"
                      :rows="2"
                      placeholder="请输入注意事项"
                      v-model="checkitems.attention">
                    </el-input>
                  </el-form-item>
                </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="qd('checkitems')">确 定</el-button>
              <el-button @click="resetForm('checkitems')">重置</el-button>
            </div>
          </el-dialog>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { listAllCheckitem,updStatue,addCheckitem,updateCheckitem} from '@/api/xsxcheckitem'

export default {
  data() {
      return {
        checkitemList:{},
        checkitems:{},
        like1:'',
        pageSize:4,//每页显示的条数
        pageNum:1,
        title:"添加检查项",
        loading: false,
        dialogTransferVisible:false,
        rules: {
          name: [
            { required: true, message: '请输入项目名称', trigger: 'blur' },
            { min: 2, message: '长度在 2 个字符以上', trigger: 'blur' }
          ],
          mnemonicName: [
            {required: true, message: '请输入助记名', trigger: 'blur' }
          ],
          sex: [
            {required: true, message: '请选择适用性别', trigger: 'change' }
          ],
          age: [
            { required: true, message: '请输入适用年龄', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入项目价格', trigger: 'blur' }
          ],
          costJiage: [
            { required: true, message: '请输入项目成本', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '请输入项目说明', trigger: 'blur' }
          ],
          attention: [
            { required: true, message: '请输入注意事项', trigger: 'blur' }
          ]
        },
      };
  },
  methods: {
    handleSizeChange(val) {
     this.pageSize = val;
    },
    async pageInit() {
      try {
        let [jcx] = await Promise.all([
         listAllCheckitem()
        ])
        this.checkitemList=jcx.data
      } catch(error) {
        this.outputError(error)
      }
    },
    findOrder(){
        return this.checkitemList.filter((item,i)=>{
            if(item.name.includes(this.like1)){
                return item;
            }
        })
    },
    xgtaocan(row){
      this.dialogTransferVisible=true;
      this.title="修改检查项";
      this.checkitems=row
      var myDate = new Date;
      var year = myDate.getFullYear(); //获取当前年
      var mon = myDate.getMonth() + 1; //获取当前月
      if(mon<10){
        mon="0"+mon;
      }
      var date = myDate.getDate(); //获取当前日
      if(date<10){
        date="0"+date;
      }
      var h = myDate.getHours();//获取当前小时数(0-23)
      if(h<10){
        h="0"+h;
      }
      var m = myDate.getMinutes();//获取当前分钟数(0-59)
      if(m<10){
        m="0"+m;
      }
      var s = myDate.getSeconds();//获取当前秒
      if(s<10){
        s="0"+s;
      }
      this.checkitems.updatetime=year+"-"+mon+"-"+date+" "+h+":"+m+":"+s
      this.checkitems.id=row.id
    },
    Kgtaocan(row){
       this.$confirm('是否确定继续此操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(row.itemStatus=='启用'){
            updStatue(0,row.id).then(response => {
              if(response.data>0){
                this.pageInit()
              }
            })
          }else{
            updStatue(1,row.id).then(response => {
              if(response.data>0){
                this.pageInit()
              }
            })
          }
          this.$message({
              type: 'success',
              message: '操作成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
    },
    addTaoCan(){
      this.dialogTransferVisible=true;
      this.checkitems={
          id:'0',
          code:'',
          name:'',
          mnemonicName:'',
          sex:'',
          age:'',
          price:'',
          affiliationClassify:"",
          type:"",
          remark:'',
          attention:'',
          createtime:'',
          updatetime:'',
          costJiage:'',
          itemStatus:'启用'
        }
      this.title="添加检查项";
      var myDate = new Date;
      var year = myDate.getFullYear(); //获取当前年
      var mon = myDate.getMonth() + 1; //获取当前月
      if(mon<10){
        mon="0"+mon;
      }
      var date = myDate.getDate(); //获取当前日
      if(date<10){
        date="0"+date;
      }
      var h = myDate.getHours();//获取当前小时数(0-23)
      if(h<10){
        h="0"+h;
      }
      var m = myDate.getMinutes();//获取当前分钟数(0-59)
      if(m<10){
        m="0"+m;
      }
      var s = myDate.getSeconds();//获取当前秒
      if(s<10){
        s="0"+s;
      }
      this.checkitems.createtime=year+"-"+mon+"-"+date+" "+h+":"+m+":"+s
    },
    qd(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
            alert('您确定要继续此操作!');
            if(this.title=='添加检查项'){
                addCheckitem(this.checkitems).then(response => {
                  if(response.data>0){
                    this.dialogTransferVisible=false;
                    this.pageInit()
                  }
                })
              }
            if(this.title=='修改检查项'){
              updateCheckitem(this.checkitems).then(response => {
                if(response.data>0){
                  this.dialogTransferVisible=false;
                  this.pageInit()
                }
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
      });

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {
    this.pageInit()
  }
}
</script>
